import 'package:flutter/material.dart';

class NestedScrollViewRoute extends StatefulWidget {
  const NestedScrollViewRoute({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _NestedScrollViewRouteState();
}

class _NestedScrollViewRouteState extends State<NestedScrollViewRoute> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              title: const Text("嵌套ListView"),
              pinned: true,
              forceElevated: innerBoxIsScrolled,
            ),
            SliverFixedExtentList(
              itemExtent: 50,
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  //创建列表项
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('list item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 20,
          itemExtent: 50,
          itemBuilder: (context, index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightGreen[100 * (index % 9)],
              child: Text('list item $index'),
            );
          },
        ),
      ),
    );
  }
}

class NestedTabBarView1Route extends StatelessWidget {
  const NestedTabBarView1Route({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final _tabs = <String>['猜你喜欢', '今日特价', '发现更多'];

    // 构建 tabBar
    return DefaultTabController(
      length: _tabs.length, // This is the number of tabs.
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('商城'),
                  floating: true,
                  snap: true,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: _tabs.map((String name) {
              return Builder(
                builder: (BuildContext context) {
                  return CustomScrollView(
                    key: PageStorageKey<String>(name),
                    slivers: <Widget>[
                      SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context),
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(8.0),
                        sliver: SliverFixedExtentList(
                          itemExtent: 50,
                          delegate: SliverChildBuilderDelegate(
                            (context, index) {
                              //创建列表项
                              return Container(
                                alignment: Alignment.center,
                                color: Colors.lightBlue[100 * (index % 9)],
                                child: Text('list item $index'),
                              );
                            },
                            childCount: 20,
                          ),
                        ),
                      ),
                    ],
                  );
                },
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}
